<script setup>
import {ref} from "vue";
import {addLoan} from "@/apis/loan";
import {useUserStore} from "@/stores/user"
import SelectMaterialComponent from "@/components/Material/SelectComponent.vue";
import SelectUserComponent from "@/components/User/SelectComponent.vue";

const ATTACH_URL = import.meta.env.VITE_ATTACH_URL;
const store = useUserStore();
const formData = ref({
  name: "",
  user_id: 0,
  record_user_id: store.user.id,
  goods_list: [],
  voucher: []
})
const visibleMaterial = ref(false)
const visibleUser = ref(false)
const materialList = ref([])
const fileList = ref([])

function selectUserConfirm(item) {
  formData.value.user_id = item.id;
  formData.value.name = item.profile.name;
  visibleUser.value = false
}

function selectMaterialConfirm(item) {
  let find = false;
  materialList.value.forEach((el, index) => {
    if (el.id === item.id) {
      el.total = el.total++
      materialList.value[index] = el;
      find = true;
    }
  })
  if (find === false) {
    materialList.value.push(item)
  }
  visibleMaterial.value = false
}

function deleteMaterial(index) {
  materialList.value.splice(index, 1);
}

function formatRes(e) {
  if (e.code === 1) {
    return {
      url: ATTACH_URL + "/" + e.data.key,
      key: e.data.key
    }
  } else {
    return {
      error: e.msg,
    }
  }
}

function submitFunc() {
  formData.value.goods_list = materialList.value;
  fileList.value.forEach(item => {
    formData.value.voucher.push({
      name: item.name,
      key: item.response.key
    })
  })
  addLoan(formData.value)
      .then(res => {
        console.log(res)
      })
}

</script>

<template>
  <main>
    <t-form>
      <t-cell-group title="借用清单">
        <t-form-item requiredMark label="领用人">
          <t-input readonly borderless v-model="formData.name" placeholder="请填写用户信息"
                   @click="visibleUser = true"></t-input>
        </t-form-item>
        <t-form-item label="记录人">
          <t-input borderless readonly :value="store.user.profile.name"></t-input>
        </t-form-item>
      </t-cell-group>
    </t-form>
    <t-cell-group title="物品列表">
      <t-cell v-for="(item, index) in materialList" :key="item.id" :title="item.name" :image="item.cover_info.url">
        <template #description>
          <t-tag style="margin-bottom: 8px;">物品编码：{{ item.material_id }}</t-tag>
          <t-stepper v-model="materialList[index].total" theme="filled"/>
        </template>
        <template #rightIcon>
          <t-icon @click="deleteMaterial(index)" name="delete-1" style="color: red;"></t-icon>
        </template>
      </t-cell>
      <t-cell>
        <template #note>
          <t-icon @click="visibleMaterial = true" size="30" name="add-circle"
                  style="margin-right: 8px;color: #535d6d;"/>
          <t-icon size="30" name="scan" style="color: #535d6d;"/>
        </template>
      </t-cell>
    </t-cell-group>
    <t-cell-group title="上传凭证">
      <div style="background-color: white;">
        <t-upload v-model="fileList" multiple :max="10" :grid-config="{ column: 4 }" :action="ATTACH_URL"
                  :formatResponse="formatRes"
                  :headers="{ Authorization: store.token }">
        </t-upload>
      </div>
    </t-cell-group>
    <div style="margin: 8px;">
      <t-button type="submit" theme="primary" block @click="submitFunc">保存</t-button>
    </div>
  </main>
  <t-popup v-model="visibleMaterial" placement="bottom">
    <div class="header">
      <div class="btn btn--cancel" aria-role="button" @click="visibleMaterial=false">
        <t-icon name="chevron-down"></t-icon>
      </div>
      <div class="title">请选择借用物品</div>
      <div class="btn btn--confirm" aria-role="button" @click="visibleMaterial=false"></div>
    </div>
    <SelectMaterialComponent @confirm="selectMaterialConfirm"/>
  </t-popup>

  <t-popup v-model="visibleUser" placement="bottom">
    <div class="header">
      <div class="btn btn--cancel" aria-role="button" @click="visibleUser=false">
        <t-icon name="chevron-down"></t-icon>
      </div>
      <div class="title">请选择领用人</div>
      <div class="btn btn--confirm" aria-role="button" @click="visibleUser=false"></div>
    </div>
    <SelectUserComponent @confirm="selectUserConfirm"></SelectUserComponent>
  </t-popup>
</template>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  height: 116rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.btn {
  font-size: 16px;
  padding: 16px;
}

.btn--cancel {
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
}

.btn--confirm {
  color: #0052d9;
  width: 20px;
  height: 20px;
}
</style>